import Image from "next/image";
import Link from "next/link";

export const metadata = {
  title: "服务项目 - 百善家政",
  description: "百善家政提供专业的保洁、月嫂、育儿嫂、养老护理等家政服务。",
};

export default function ServicesPage() {
  return (
    <div className="flex flex-col">
      {/* 页面标题 */}
      <section className="bg-blue-600 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-bold mb-4">我们的服务</h1>
          <p className="text-xl max-w-3xl mx-auto mb-8">
            百善家政提供全方位的家政服务，满足您的各种需求
          </p>
          <Link 
            href="/contact#booking-service" 
            className="inline-block bg-white text-blue-600 font-medium px-6 py-3 rounded-md hover:bg-blue-50 transition-colors"
          >
            立即预约服务
          </Link>
        </div>
      </section>

      {/* 服务介绍 */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">我们能做什么</h2>
            <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
              百善家政提供多种专业家政服务，全方位满足您的家庭需求
            </p>
          </div>

          {/* 家庭保洁 */}
          <div id="cleaning" className="mb-20 scroll-mt-24">
            <div className="lg:flex lg:items-center lg:space-x-12">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <div className="rounded-lg h-80 relative overflow-hidden">
                  <Image
                    src="/images/cleaning.jpg"
                    alt="家庭保洁服务"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <div className="lg:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">家庭保洁</h3>
                <p className="text-gray-600 mb-6">
                  我们提供专业的家庭保洁服务，包括日常保洁、深度清洁、开荒保洁等，让您的家居环境整洁舒适。我们的保洁人员经过专业培训，使用环保清洁产品，确保清洁效果的同时保护您和家人的健康。
                </p>
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-900 mb-2">服务内容：</h4>
                  <ul className="list-disc list-inside text-gray-600 space-y-1">
                    <li>日常家居清洁（客厅、卧室、厨房、卫生间等）</li>
                    <li>深度清洁（去除顽固污渍、消毒杀菌等）</li>
                    <li>开荒保洁（新房装修后的全面清洁）</li>
                    <li>定期保洁服务（每周/每月上门服务）</li>
                  </ul>
                </div>
                <Link
                  href="/contact#booking-service"
                  className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  预约此服务
                </Link>
              </div>
            </div>
          </div>

          {/* 深度清洁 */}
          <div className="mb-20">
            <div className="lg:flex lg:items-center lg:space-x-12 flex-row-reverse">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <div className="rounded-lg h-80 relative overflow-hidden">
                  <Image
                    src="/images/deep-cleaning.jpg"
                    alt="深度清洁服务"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <div className="lg:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">深度清洁</h3>
                <p className="text-gray-600 mb-6">
                  深度清洁服务针对日常清洁难以彻底清除的污渍和细菌，我们使用专业设备和清洁剂，对家居环境进行全面彻底的清洁，特别适合季节性大扫除或特殊场合前的准备。
                </p>
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-900 mb-2">服务内容：</h4>
                  <ul className="list-disc list-inside text-gray-600 space-y-1">
                    <li>家具深度清洁（沙发、床垫、窗帘等）</li>
                    <li>厨房深度清洁（油烟机、灶台、冰箱等）</li>
                    <li>卫生间深度消毒（去霉、除垢、杀菌）</li>
                    <li>地板打蜡和地毯深度清洗</li>
                  </ul>
                </div>
                <Link
                  href="/contact#booking-service"
                  className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  预约此服务
                </Link>
              </div>
            </div>
          </div>

          {/* 月嫂服务 */}
          <div id="maternity" className="mb-20 scroll-mt-24">
            <div className="lg:flex lg:items-center lg:space-x-12">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <div className="rounded-lg h-80 relative overflow-hidden">
                  <Image
                    src="/images/maternity.jpg"
                    alt="月嫂服务"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <div className="lg:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">月嫂服务</h3>
                <p className="text-gray-600 mb-6">
                  我们的月嫂均经过专业培训和严格筛选，拥有丰富的产妇和新生儿护理经验。她们将为产妇提供科学的护理和饮食指导，同时照顾新生儿的日常起居，让新妈妈安心休养，宝宝健康成长。
                </p>
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-900 mb-2">服务内容：</h4>
                  <ul className="list-disc list-inside text-gray-600 space-y-1">
                    <li>产妇护理（伤口护理、乳房护理、产后恢复指导等）</li>
                    <li>新生儿护理（洗澡、换尿布、喂养等）</li>
                    <li>母乳喂养指导</li>
                    <li>产妇营养餐制作</li>
                  </ul>
                </div>
                <Link
                  href="/contact#booking-service"
                  className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  预约此服务
                </Link>
              </div>
            </div>
          </div>

          {/* 育儿嫂 */}
          <div id="childcare" className="mb-20 scroll-mt-24">
            <div className="lg:flex lg:items-center lg:space-x-12 flex-row-reverse">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <div className="rounded-lg h-80 relative overflow-hidden">
                  <Image
                    src="/images/childcare.jpg"
                    alt="育儿嫂服务"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <div className="lg:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">育儿嫂</h3>
                <p className="text-gray-600 mb-6">
                  育儿嫂专注于0-3岁婴幼儿的照料和早期教育。我们的育儿嫂不仅会照顾宝宝的日常生活，还会根据宝宝的月龄特点，进行适当的早教活动，促进宝宝身心健康发展。
                </p>
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-900 mb-2">服务内容：</h4>
                  <ul className="list-disc list-inside text-gray-600 space-y-1">
                    <li>婴幼儿日常照料（喂养、洗澡、换尿布等）</li>
                    <li>辅食添加指导</li>
                    <li>早期教育活动</li>
                    <li>婴幼儿常见疾病护理</li>
                  </ul>
                </div>
                <Link
                  href="/contact#booking-service"
                  className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  预约此服务
                </Link>
              </div>
            </div>
          </div>

          {/* 养老护理 */}
          <div id="eldercare" className="mb-20 scroll-mt-24">
            <div className="lg:flex lg:items-center lg:space-x-12">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <div className="rounded-lg h-80 relative overflow-hidden">
                  <Image
                    src="/images/eldercare.jpg"
                    alt="养老护理服务"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <div className="lg:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">养老护理</h3>
                <p className="text-gray-600 mb-6">
                  我们提供专业的居家养老护理服务，帮助老年人解决日常生活中的困难，提供身体护理、情感陪伴和健康管理等服务，让老年人在家中也能享受到专业的照料。
                </p>
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-900 mb-2">服务内容：</h4>
                  <ul className="list-disc list-inside text-gray-600 space-y-1">
                    <li>日常生活照料（饮食、洗漱、穿衣等）</li>
                    <li>基础医疗护理（用药管理、血压监测等）</li>
                    <li>康复训练辅助</li>
                    <li>情感陪伴和心理疏导</li>
                  </ul>
                </div>
                <Link
                  href="/contact#booking-service"
                  className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  预约此服务
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 服务流程 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">服务流程</h2>
            <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
              简单几步，轻松享受专业家政服务
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-white p-6 rounded-lg shadow text-center">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-blue-600">1</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">预约服务</h3>
              <p className="text-gray-600">
                通过电话、网站或微信预约您需要的服务，告诉我们您的具体需求
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow text-center">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-blue-600">2</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">确认需求</h3>
              <p className="text-gray-600">
                我们的客服会与您联系，确认服务细节和时间安排
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow text-center">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-blue-600">3</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">上门服务</h3>
              <p className="text-gray-600">
                专业家政人员准时上门，按照约定提供优质服务
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow text-center">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-blue-600">4</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">服务评价</h3>
              <p className="text-gray-600">
                服务完成后，您可以对服务质量进行评价，我们将不断改进
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 服务保障 */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">我们的服务保障</h2>
            <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
              百善家政致力于为每位客户提供安心、放心的服务体验
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow">
              <div className="h-14 w-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                <svg
                  className="h-8 w-8 text-blue-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">人员严格筛选</h3>
              <p className="text-gray-600">
                所有家政人员均经过严格背景调查和专业技能测试，确保服务质量和安全
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow">
              <div className="h-14 w-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                <svg
                  className="h-8 w-8 text-blue-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">专业培训</h3>
              <p className="text-gray-600">
                所有家政人员都接受定期专业培训，掌握最新的服务技能和标准
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow">
              <div className="h-14 w-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                <svg
                  className="h-8 w-8 text-blue-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">服务保障</h3>
              <p className="text-gray-600">
                提供服务质量保障，如有不满意，我们将及时处理并提供解决方案
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 预约服务 */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">需要我们的服务？</h2>
          <p className="text-xl mb-8 max-w-3xl mx-auto">
            立即联系我们，获取专业的家政服务解决方案
          </p>
          <Link
            href="/contact#booking-service"
            className="inline-block bg-white text-blue-600 px-8 py-4 rounded-md font-medium text-lg hover:bg-gray-100 transition-colors"
          >
            立即预约
          </Link>
        </div>
      </section>
    </div>
  );
}